<template>
  <header class="header flexbox">
    <h1 class="headerTitle">零碳（绿色）综合数字能源系统</h1>
    <div class="headerTime">{{ currentDate }} {{ currentTime }} {{ weekDay }}</div>
  </header>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

defineOptions({
  name: 'Header'
})

const currentTime = ref('')
const currentDate = ref('')
const weekDay = ref('')
let timer = null

const updateTime = () => {
  const now = new Date()
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

  // 格式化时间
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${hours}:${minutes}:${seconds}`

  // 格式化日期和星期
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  currentDate.value = `${year}-${month}-${day}`
  weekDay.value = weekDays[now.getDay()]

  // 计算到下一秒的延迟时间
  const nextSecond = 1000 - now.getMilliseconds()
  timer = setTimeout(updateTime, nextSecond)
}

onMounted(() => {
  updateTime()
})

onBeforeUnmount(() => {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
})
</script>

<style scoped>
.header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: url('@/assets/imgs/headerBg.png') center center/cover no-repeat;
  background-color: rgba(0, 0, 0, 0.5);
}

.headerTitle {
  font-size: 80px;
  font-weight: bold;
  background: linear-gradient(to bottom, #30948b, #fff);
  background-clip: text;
  -webkit-background-clip: text;
  letter-spacing: 8px;
  color: transparent;
}

.headerTime {
  position: absolute;
  right: 40px;
  top: 60px;
  color: #fff;
  font-size: 34px;
  font-family: 'DS-Digital', Arial, sans-serif;
  line-height: 40px;
}
</style>
